 <template>
  <!-- 详细内容页面 -->
  <div id="container">
    <el-collapse v-model="activeNames" v-loading="loading">
      <el-collapse-item title="基本信息" name="1">
        <collect-detail ref="detail" :form="collectData"></collect-detail>
      </el-collapse-item>
      <el-collapse-item
        title="收款记录"
        name="2"
        v-if="collectData.paymentType == 3"
      >
        <return-money-list
          ref="returnMoneyList"
          :list="collectData.customerPaymentContractList"
        ></return-money-list>
      </el-collapse-item>
      <!-- <el-collapse-item title="审批流程" name="3">
        <check-process
          ref="checkProcess"
          :id="$route.query.id"
          :type="5"
          @updatePage="updatePage"
        ></check-process>
      </el-collapse-item> -->
    </el-collapse>
  </div>
</template>
<script>
import collectDetail from './components/collectDetail.vue'
import returnMoneyList from './components//returnMoneyList'
import checkProcess from '@/components/checkProcess/checkList'
import { queryTypeByDic } from '@/utils/getData'
export default {
  name: 'detail',
  data () {
    return {
      activeNames: ['1', '2'],
      checkCofig: [],
      repaymentType: [],//回款方式
      collectData: {},
      loading: false
    }
  },
  components: {
    collectDetail,
    returnMoneyList,
    checkProcess
  },
  beforeMount () {
    this.getType()
  },
  mounted () {

  },
  methods: {
    // 获取收款方式
    async getType () {
      this.repaymentType = await queryTypeByDic('payment')
      this.getDetail()

    },
    async getDetail () {
      this.loading = true
      let { data } = await this.$API.finance.collectManagement.getCollectDetailById.post({ id: this.$route.query.id })
      this.collectData = data
      this.repaymentType.forEach(item => {
        if (item.value == this.collectData.repaymentType) {
          this.collectData.repaymentTypeName = item.name
        }
      })
      // this.activeNames.push('3')
      this.loading = false
    },
    updatePage () {
      this.getDetail()
      this.$refs.detail.relodPart()
    }
  }
}
</script>
<style lang='scss' scoped>
#container {
  margin: 10px;
  :deep(.el-collapse-item__header) {
    padding-left: 20px;
    font-size: 16px;
  }
  :deep(.el-collapse-item__content) {
    padding: 0 20px 20px 20px;
  }
  :deep(.el-form-item) {
    margin-bottom: 5px;
  }
  :deep(.el-form-item__label) {
    color: #999;
  }
}
</style>